<template>
  <div>
    <el-card style="width: 70%;margin-left: 15%;text-align: center">
      <el-row style="font-size: 300%">{{title}}</el-row>
      <el-row style="font-size: 150%;text-align: left">
        答题人：
        <el-select v-model="currentUserId" placeholder="请选择" @change="currentSelect">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label  + '(id:' + item.value + ')'"
              :value="item.value"
          >
          </el-option>
        </el-select>
        <span style="font-size: 50%;margin-left: 35%">起始时间{{startTime}}</span><span style="font-size: 50%;margin-left: 20px">结束时间{{endTime}}</span>
      </el-row>
      <el-divider></el-divider>
      <el-form :model="allAnswer" style="text-align: left">

        <el-form-item v-for="(answers,index1) in allAnswer"
                      :key="index1">
            <span>
              {{index1+1}}.{{answers.title}}
            </span>

          <div class="show_radio" v-if="answers.type === '单选'">
            <el-radio-group v-model="answers.answer">
              <el-radio v-for="(option, index2) in answers.option" :label="option.value" >
                {{option.value}}
              </el-radio>
            </el-radio-group>
          </div>

          <div class="show_multiSelect" v-if="answers.type === '多选'">
            <el-checkbox-group v-model="answers.answer">
              <el-checkbox v-for="(option, index2) in answers.option" :label="option.value">
              </el-checkbox>
            </el-checkbox-group>
          </div>

          <div class="show_shortAnswer" v-if="answers.type === '简答'">
            {{answers.answer}}
          </div>
        </el-form-item>
      </el-form>
    </el-card>

  </div>
</template>

<script>

export default {
  data(){
    return{
      allAnswer:[],
      answer_list:[],
      title:'',
      content:'',
      answerDetail:{
        answer:[],
        options:[],
        questionId:'',
        title:'',
        type:'',
      },
      totalUser:'',
      userId:[],
      startTime:'',
      endTime:'',
      allUser:[],
      currentUserId:'',
      options:[],
    }
  },
  methods:{
    currentSelect(){
      this.$http({
        url: "http://47.104.100.60:81/getAnswerByQuestionIdAndUserId",
        method: "post",
        data: {
          questionnaire_id:this.$route.query.questionnaireId,
          user_id: this.currentUserId
        }
      }).then(res => {
        this.allAnswer = JSON.parse(res.data.answer).answer
        this.startTime = res.data.start_time
        this.endTime = res.data.end_time
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted() {
    //问卷初始化，将问卷的问题内容保存到allquestion中
    //  判断
    this.$http({
      url: "http://47.104.100.60:81/getAllUserIdByQuestionId",
      method: "post",
      data: {
        questionnaire_id: this.$route.query.questionnaireId,
      }
    }).then(res => {
      this.userId = res.data
      this.totalUser=this.userId.length
      this.currentUserId=this.userId[0]
      for(let i=0;i<this.totalUser;i++){
        this.$http({
          url: "http://47.104.100.60:82/getCommonUserByID",
          method: "post",
          data: {
            id: this.userId[i],
          }
        }).then(res => {
          this.options.push({
            value: res.data.id,
            label: res.data.username
          })
        }).catch(err => {
          console.log(err)
        })
      }
      this.$http({
        url: "http://47.104.100.60:81/getAnswerByQuestionIdAndUserId",
        method: "post",
        data: {
          questionnaire_id:this.$route.query.questionnaireId,
          user_id: this.currentUserId
        }
      }).then(res => {
        this.allAnswer = JSON.parse(res.data.answer).answer
        this.startTime = res.data.start_time
        this.endTime = res.data.end_time
      }).catch(err => {
        console.log(err)
      })
      this.$http({
        url:"http://47.104.100.60:83/findById",
        method:"post",
        data:{
          id:this.$route.query.questionnaireId
        }
      }).then(res =>{
        this.content = res.data.content
        this.title = res.data.title
      }).catch(err=>{
        console.log(err)
      })

    }).catch(err => {
      console.log(err)
    })
  }

}
</script>

<style scoped>

</style>